<template>
	<view class="content" v-if="albumArry.length>0">
		<!-- 头部背景 -->
		<view class="header">
			<view class="pic">
				<image :src="albumDetail.lcover" mode="aspectFill"></image>
			</view>
			<view class="title">
				<view class="tit-name">{{albumDetail.name}}</view>
				<view class="btn">关注专辑</view>
			</view>
		</view>
		<!-- 作者寄语 -->
		<view class="message">
			<view class="culter">
				<view class="imgItem">
					<image :src="albumDetail.user.avatar" mode="aspectFill"></image>
				</view>
				<view class="culter-name">{{albumDetail.user.name}}</view>
			</view>
			<view class="album-message">{{albumDetail.desc}}</view>
		</view>
		<!-- 图片列表 -->
		<view class="imgarry">
			<view class="img-area">
				<view class="img-item" @click="To_detail(item)" v-for="item in albumArry" :key="item.id">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import {albumdetail} from "@/api/album.js"
	export default{
		data(){
			return{
				albumId:"",
				parms:{
					limit:30,
					order:"new",
					skip:0,
					first:1
				},
				// 专辑详情
				albumDetail:{},
				// 专辑图片数组
				albumArry:[],
				// 判断是否有分页
				hasmore:true,
				status: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		onLoad(options) {
			console.log(options)
			this.albumId=options.id
			this.loadData()
		},
		// 页面触底
		onReachBottom() {
			// console.log(123)
			this.parms.first=0
			if(this.hasmore){
				this.parms.skip+=this.parms.limit
				this.loadData()
			}
		},
		methods:{
			loadData(){
				const {limit,order,skip,first}=this.parms
				albumdetail('image/v1/wallpaper/album/'+this.albumId+'/wallpaper',{limit,order,skip,first}).then(res=>{
					console.log(res)
					if(Object.keys(this.albumDetail).length===0){
						this.albumDetail=res.res.album
					}
					if(res.res.wallpaper.length>0){
						this.albumArry=[...this.albumArry,...res.res.wallpaper]
						this.status="loading"
					}else{
						this.hasmore=false
						this.status="nomore"
					}
				})
			},
			// 去图片详情
			To_detail(item){
				console.log(item)
				var newData=JSON.stringify(item)
				uni.navigateTo({
					url:'/pages/img/index?newData='+encodeURIComponent(newData)
				})
			}
		}
	}
</script>

<style lang="scss">
	.header{
		position: relative;
	}
	.pic{
		height: 500rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		position: absolute;
		width: 100%;
		padding: 0 20rpx;
		transform: translate(-50%,0);
		left: 50%;
		bottom: 20rpx;
		.tit-name{
			font-weight: 600;
		}
		.btn{
			padding: 15rpx 10rpx;
			background-color:#D52A7E;
		}
	}
	.culter{
		padding: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1rpx solid #ddd;
		.imgItem{
			width: 80rpx;
			height: 80rpx;
			padding-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.culter-name{
			font-weight: 600;
		}
	}
	.album-message{
		padding:20rpx;
	}
	.img-area{
		padding: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		.img-item{
			width: 33.33%;
			border: 5rpx solid #fff;
			image{
				width: 100%;
			}
			
		}
	}
	.imgarry{
		padding-bottom: 20rpx;
	}
</style>
